<template>
  <div>
    <van-tabs v-model="active" sticky animated @click="onTabSwitch">
      <van-tab v-for="(item, index) in list" :key="index" :title="item.title" :name="index">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了">
          <van-cell v-for="item1 in img" :key="item1.id" @click="login(item1.id)">
            <van-image width="100%" height="100%" :src="item1.img_url" />
            <!-- 遮罩层 -->
            <div class="box">
              <van-overlay :show="show">
                <div>
                  <p>{{item1.title}}</p>
                  <p>{{item1.zhaiyao}}</p>
                </div>
              </van-overlay>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
    <div></div>
  </div>
</template>

<script>
import vuex from "vuex";

export default {
  name: "home",
  created() {
    this.getGoodsList();
    this.getGood(0);
  },
  methods: {
    // onChange(index) {
    //   Toast('当前 Swipe 索引：' + index.id);
    // },
    async getGoodsList() {
      const { data: res } = await this.$http.get("/api/getimgcategory");
      this.list = [{ id: 0, title: "全部" }, ...res.message];
    },
    onTabSwitch(index, title) {
      const id = this.list.find(item => item.title == title).id;
      this.loading = true;
      this.getGood(id);
    },
    async getGood(id) {
      const { data: res } = await this.$http.get("/api/getimages/" + id);
      this.img = res.message;
      this.loading = false;
    },
    login(id) {
      this.$store.commit("imgId", id);
      this.$router.push("/detail");
    }
  },

  data() {
    return {
      list: [],
      img: [],
      active: 0,
      show: true,
      loading: false,
      finished: false
    };
  }
};
</script>

<style lang="less" scoped>
.van-cell__value {
  border-radius: 10px;
  overflow: hidden;
}

.van-tabs__wrap {
  position: fixed;
  top: 46px;
  left: 0;
}

.box > .van-overlay {
  padding-left: 10px;
  height: 100%;
  width: 100%;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
}

.van-overlay p {
  font-size: 12px;
  line-height: 15px;
}

.box {
  overflow: hidden;
  padding: 0 10px;
  height: 75px;
  width: 100%;
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
}
p {
  font-size: 12px;
  margin: 5px 0;
}
.van-tab__pane {
  padding: 0 10px;
}
</style>
